<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="退单详情" navbarType='0' fontColor="#FFFFFF" :bgColor="themeColor" leftIconColor="#FFFFFF"></wlk-navbar>
        <block v-if="!loading">
            <view class="detail-bc" :style="{background:' linear-gradient(to bottom,'+themeColor+' ,'+ color+')'}">
                <view class="d-status bgw br08 pd30">
                    <view class="wlkflex justify-between status-info">
                        <view class="status-text bold">{{refund.refund_status_text}}</view>
                    </view>
                    <u-divider></u-divider>
                    <view class="wlkflex order-info mt30 justify-between">
                        <view class="order-title mr10">退单编号：</view>
                        <view class="wlkflex col9">
                            {{refund.refund_sn}}
                            <view class="ml20 copy-btn" @click="copyOrderSn(refund.refund_sn)">
                                复制
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="pd030 mt30">
                 <view class="goods-list bgw pd30 br08">
                     <view class="head-title bold wlkflex">
                         <u-avatar :src="initMain.logo" size="25"></u-avatar>
                         <view class="ml10">{{initMain.system_name}}</view>
                     </view>
                    <navigator :url="'/pages/goods/detail?id=' + refund.orderItem.goods_id" class="goods-info mt30 wlkflex justify-between wd100 align-start bgw wrap">
                        <view class="o-info-img br04 overHidden">
                            <image class="wd100 hg100" lazy-load :src="refund.orderItem.goods_images[0]"  mode="aspectFill"/>
                        </view>
                        <view class="o-info-main">
                            <view class="o-main-title u-line-2">
                                {{refund.orderItem.goods_title}}
                            </view>
                            <view class="wlkflex justify-between mt10">
                                <view class="o-main-date">
                                    x <text class="ml05">{{refund.orderItem.goods_quantity}}</text>
                                </view>
                                <view class="o-main-price bold">
                                    ¥ <text>{{refund.orderItem.total_fee}}</text>
                                </view>
                            </view>
                     </view>
                    </navigator>
                     <u-divider></u-divider>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">退款金额：</view>
                         <view class="col9"><text class="unit">¥</text>{{refund.refund_fee}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">退款方式：</view>
                         <view class="col9">原路返回</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">申请时间：</view>
                         <view class="col9">{{$u.timeFormat(refund.createtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between" v-if="!$u.test.isEmpty(refund.finishtime)">
                         <view class="order-title mr10">处理时间：</view>
                         <view class="col9">{{$u.timeFormat(refund.finishtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
                     </view>
                     <view class="wlkflex other-info mt30 justify-between">
                         <view class="order-title mr10">申请备注：</view>
                         <u--textarea disabled :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="refund.remark" ></u--textarea>
                     </view>
                 </view>
             </view>
            <view class="wlk-fixed-btn wlkflex justify-end">
                <view class="btn-item" v-if="refund.refund_status=='1'" @click="cancelModel=true">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="取消申请"></u-button>

                </view>
                <view class="btn-item" v-else-if="refund.refund_status=='-1'" @click="sysShow=true">
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  text="已拒绝"></u-button>

                </view>
                <view class="btn-item" v-else>
                    <u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'70rpx'
                         }" type="info" plain shape="circle"  :text="refund.refund_status_text"></u-button>

                </view>
            </view>
        </block>
        <u-modal :confirmColor="themeColor" :show="sysShow" title="拒绝原因" @confirm="sysShow=false">
            <view class="slot-content wd100">
                <u--textarea disabled :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="refund.sys_msg" ></u--textarea>
            </view>
        </u-modal>
        <u-modal :show="cancelModel" title="提示" showCancelButton @confirm="cancel" @cancel="cancelModel=false" :confirmColor="themeColor" content="是否确认取消退款申请？"></u-modal>
    </view>
</template>
<script>
    import {rgbaToRgb,copy,toUrl} from '@/wlkutils/tools';
    import {mapMutations, mapGetters} from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor','initMain'])
        },
        onLoad() {
            _self = this;
            _self.id = this.$Route.query.id;
        },
        data() {
            return {
                id: '',
                cancelModel:false,
                refund: [],
                order: [],
                color: '',
                loading:true,
                sysShow:false
            }
        },
        onShow() {
            this.color = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.01);
            this.getData();
        },
        watch: {
            themeColor(val) {
                _self.color = uni.$u.colorToRgba(rgbaToRgb(val), 0.01);
            }
        },
        methods: {
            onChange(e) {
                this.timeData = e;
            },
            async getData() {
                this.loading = true;
                uni.$u.http.post('refund/getData', {
                    id: _self.id,
                    type: 'goods'
                }).then(res => {
                    _self.refund = res.data.refund;
                    _self.order = res.data.order;
                    _self.loading = false;
                }).catch(res => {
                })
            },
            copyOrderSn(v){
                copy(v);
            },
            cancel(){
                uni.$u.http.post('refund/unRefund', {
                    id: _self.id,
                    type:'goods'
                }).then(res => {
                    _self.cancelModel = false;
                    _self.getData();
                }).catch(res => {
                })
            },
        }
    };
</script>
<style lang="scss">
    page{
        padding-bottom: 100rpx;
        .detail-bc {
            padding: 30rpx 30rpx 0  30rpx;
            .d-status{
                .status-info{
                    .status-text{
                        font-size: $font-max;
                    }
                    .time-info{
                        font-size: $font-base;
                        .title{
                            color:$uni-text-color-grey;
                        }
                        .time {
                            @include flex;
                            align-items: center;

                            &__item {
                                color:$-wash-price-color;
                                font-size: $font-base;
                                text-align: center;
                            }
                        }
                    }
                }
                .desc{
                    font-size: $font-base;
                    color:$uni-text-color-grey;
                }

            }
            .order-info{
                font-size: $font-base;
                .order-title{
                    width: 22%;
                }
                .order-wd-title{
                    color:$uni-text-color-grey;
                    width: 23%;
                }
                .copy-btn{
                    padding: 5rpx 20rpx;
                    border-radius: 30rpx;
                    border:$-solid-border ;
                    font-size: $font-sm;
                    color:$uni-text-color-grey;
                }
            }

        }
        .head-title{
            font-size: $font-lg;
            image{
                width: 40rpx;
            }
            .desc{
                font-size: $font-base;
                font-weight: normal;
            }
        }
        .goods-list{
            font-size: $font-base;
            .goods-info{
                .o-info-img{
                    width: 200rpx;
                    height:  200rpx;
                    text-align: center
                }
                .o-info-main{
                    width: 65%;
                    .o-main-title{
                        font-size: $font-lt;
                        font-weight: bold;
                    }
                    .o-main-date{
                        font-size: $font-sm;
                        color: #666;
                    }
                    .o-main-price{
                        font-size: $font-sm;
                        color: #333333;
                        text{
                            font-size: $font-base;
                        }
                    }
                    .o-main-qrcode{
                        border-radius: 80rpx;
                        padding: 10rpx 20rpx;
                        font-size: $font-sm;
                        background-color: #f3f3f3;
                        color: #666666;
                    }
                    .o-main-status{}
                    .o-main-user{
                        font-size: $font-sm;
                        color: #666;
                    }
                }
                .goods-btn{

                }
            }
            .other-info{
                .unit{
                    font-size: $font-sm;
                }
                .price{
                    color: $-wash-price-color;
                }
            }
        }
        .scroll{
            .code-list{
                font-size: $font-base;
                padding: 25rpx 30rpx;
                background-color: #F3F3F3;
                display: inline-block;
            }
        }
        .verify-status{
            position: absolute;
            height: 300rpx;
            width: 300rpx;
            background-color: rgba(255,255,255,0.8);
            image{
                width: 140rpx;
            }
        }
        .foot{
            font-size: $font-base;
            margin: 40rpx 0 40rpx 0;
        }
        .info{
            font-size: $font-base;
            .title{

            }
            .copy_btn{
                background-color: #F3F3F3;
                color: #666;
                padding: 5rpx 10rpx;
            }
        }
        .btn-item{
            width: 25%;
            margin-right: 30rpx;
        }
        .wlk-fixed-btn{
            min-height: 118rpx;
        }
        .refund-item{
            padding-bottom: 150rpx;
            min-height: 900rpx;
            .refund-goods-img{
                width: 180rpx;
                height:  180rpx;
                text-align: center
            }
            .refund-goods-main{
                width: 71%;
                .refund-goods-title{
                    font-size: $font-lt;
                    font-weight: bold;
                }
                .refund-goods-date{
                    font-size: $font-sm;
                    color: #666;
                }
                .refund-goods-price{
                    font-size: $font-sm;
                    color: #333333;
                    text{
                        font-size: $font-base;
                    }
                }
            }
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-base;
            }
            .wlk-fixed-btn{
                box-shadow: none;
                left:0
            }
        }

    }

</style>
